<template>
  <div class="home-page">
    <img
      style="width: 100% !important;max-width: 100% !important;"
      src="@/assets/banner.jpg"
      alt=""
    />
    <a-row style="margin-top:10px;display:flex;flex-wrap: wrap;">
      <a-card title="我的消息" :style="{ width: isMobile ? '100%' : '55%' }">
        <template slot="extra">
          <a-button @click="deleteMsg">删除选中</a-button>
          <a-button @click="deleteMsgAll">清空全部</a-button>
        </template>
        <a-list
          :loading="loading"
          itemLayout="horizontal"
          :dataSource="messages"
          :pagination="pagination"
        >
          <a-list-item slot="renderItem" slot-scope="item">
            <!-- <a slot="actions" v-if="item.type == 1 || item.type == 4 || item.type == 7" @click="showDetails(item.type, item.foreignKey, item.foreignStatus)">查看详情</a> -->
            <a-list-item-meta :description="item.info">
              <span slot="title">{{ item.title }}</span>
              <span slot="avatar">
                <a-checkbox
                  @change="checkBoxChange"
                  :key="item.id"
                  :value="item.id"
                />
              </span>
            </a-list-item-meta>
          </a-list-item>
        </a-list>
      </a-card>

      <a-card
        title="公告"
        :style="{
          width: isMobile ? '100%' : '44%',
          'margin-left': isMobile ? '0' : '1%'
        }"
      >
        <a-list
          :loading="noticeLoading"
          itemLayout="horizontal"
          :dataSource="noticeList"
          :pagination="noticePagination"
        >
          <a-list-item slot="renderItem" slot-scope="item">
            <a slot="actions" @click="showNote(item.id)">查看详情</a>
            <h4 class="ant-list-item-meta-title">
              <a>{{ item.ggbt }}</a>
            </h4>
          </a-list-item>
        </a-list>
      </a-card>
    </a-row>

    <a-row style="margin-top:10px" :gutter="12">
      <a-col :span="24">
        <a-card
          v-for="(m, index) in fastMenus"
          :key="index"
          class="fast-menu-list"
          :title="m.name"
        >
          <a-card-grid
            v-for="menu in m.children"
            :key="menu.id"
            @click="toPath(menu.path)"
            style="textAlign:center;height: 90px;"
            :style="{ width: isMobile ? '33%' : '150px' }"
          >
            <template v-if="menu.icon">
              <Icon :type="menu.icon" /><br />
            </template>
            {{ menu.name }}
          </a-card-grid>
        </a-card>
      </a-col>
      <!-- <a-col :md="11" :sm="24">
        <a-card
          v-for="(m,index) in fastMenus"
          v-if="index %2 == 1"
          :key="index"
          class="fast-menu-list"
          :title="m.name">
          <a-card-grid v-for="menu in m.children" :key="menu.id" @click="toPath(menu.path)" style="textAlign:center;height: 90px;" :style="{width: isMobile? '33%' : '25%'}">
            <template v-if="menu.icon">
              <Icon :type="menu.icon"/><br/>
            </template>
            {{ menu.name }}
          </a-card-grid>
        </a-card>
      </a-col> -->
    </a-row>

    <a-modal
      title="流程状态"
      :visible="visible"
      @cancel="visible = false"
      :width="700"
      cancelText="关闭"
    >
      <a-steps :current="1">
        <a-step>
          <template slot="title">
            Finished
          </template>
          <span slot="description">This is a description.</span>
        </a-step>
        <a-step title="In Progress" description="This is a description." />
        <a-step title="Waiting" description="This is a description." />
      </a-steps>
    </a-modal>
  </div>
</template>
<script>
// import HeadInfo from '@/views/common/HeadInfo'
import { mapState } from "vuex";
import moment from "moment";
import Icon from "ant-design-vue/es/icon";
// import {api} from '@/api'
moment.locale("zh-cn");

export default {
  name: "HomePage",
  components: { Icon },
  data() {
    return {
      totalStudent: 0,
      totalArrearage: 0,
      arrearageRate: 0,
      visible: false,
      // contentList: {
      //   tab1: 'content1',
      //   tab2: 'content2'
      // },
      // tabLeftList: [{
      //   key: 'department',
      //   tab: '按院系'
      // }, {
      //   key: 'major',
      //   tab: '按专业'
      // }],
      // tabRightList: [{
      //   key: 'doctor',
      //   tab: '博士招生计划'
      // }, {
      //   key: 'master',
      //   tab: '硕士招生计划'
      // }],
      tabKey: ["department", "doctor"],
      // chartOptions: {
      //   chart: {
      //     id: 'vuechart-example'
      //   },
      //   xaxis: {
      //     categories: ['研究生院', '商学院', '旅游管理', '信息管理学院', '文学院', '法学院', '新闻与传播学院', '外语学院']
      //   }
      // },
      series: [
        {
          name: "学生人数",
          data: [30, 40, 35, 50, 49, 60, 70, 91]
        }
      ],
      noticeList: [],
      fastMenus: [],
      // studentMenus: [],
      // teaMenus: [],
      // recruitMenus: [],
      // 消息
      loading: true,
      noticeLoading: true,
      messages: [],
      msgSelect: [],
      pagination: {
        onChange: page => {
          this.loadMessage(page);
        },
        current: 1,
        pageSize: 4,
        total: 0
      },
      noticePagination: {
        onChange: page => {
          this.loadNotice(page);
        },
        current: 1,
        pageSize: 4,
        total: 0
      }
    };
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      let pageParams = vm.$store.state.app.pageParams || {};
      if (pageParams.pagination) {
        vm.pagination.current = pageParams.pagination;
      }
      vm.initPage();
    });
  },
  beforeRouteLeave(to, from, next) {
    this.$store.dispatch("app/setPageParams", {
      path: this.$route.path,
      pagination: this.pagination.current
    });
    next();
  },
  created() {
    console.log("abds");
    this.fastMenus = JSON.parse(
      localStorage.getItem("USER_ROUTER")
    )[0].children.filter(v => {
      return v.name !== "工作台" && v.name !== "个人中心";
    });
  },
  computed: {
    ...mapState({
      isMobile: state => state.setting.isMobile
    })
  },
  methods: {
    onTabChange(key, val) {
      this.$set(this.tabKey, key, val);
    },
    initPage() {
      // this.$api.home.noticeALl().then(res => {
      //   this.noticeList = res.data
      // })
      this.loadNotice(this.noticePagination.current);
      this.loadMessage(this.pagination.current);
      // this.$api.student.studentStatis().then(res => {
      //   this.totalStudent = res.data.totalStudents
      //   this.totalArrearage = res.data.totalArrearage
      //   this.totalArrearage = res.data.totalArrearage
      // })
    },
    checkBoxChange(e) {
      if (e.target.checked && !this.msgSelect.includes(e.target.value)) {
        this.msgSelect.push(e.target.value);
      } else if (!e.target.checked && this.msgSelect.includes(e.target.value)) {
        this.msgSelect.splice(this.msgSelect.indexOf(e.target.value), 1);
      }
    },
    showNote(id) {
      this.$router.push(`/bind/noticeView?id=${id}`);
    },
    deleteMsg() {
      if (this.msgSelect.length < 1) {
        this.$message.warning("请选择要删除的消息");
        return;
      }
      this.$api.base.sysMessageDelete(this.msgSelect.join(",")).then(() => {
        this.$message.success("删除成功");
        this.msgSelect = [];
        this.loadMessage(1);
      });
    },
    deleteMsgAll() {
      if (this.messages.length < 1) {
        this.$message.success("已经没有消息啦！");
        return;
      }
      this.$api.base.sysMessageDeleteAll().then(() => {
        this.$message.success("删除成功");
        this.msgSelect = [];
        this.loadMessage(1);
      });
    },
    loadNotice(pageNum) {
      let parameter = {};
      this.noticePagination.current = pageNum;
      parameter.pageNum = pageNum;
      parameter.pageSize = 4;
      this.$api.home.noticeShowList(parameter).then(res => {
        this.noticeList = res.data.rows;
        this.noticePagination.total = res.data.total;
        this.noticeLoading = false;
      });
    },
    loadMessage(pageNum) {
      let parameter = {};
      this.pagination.current = pageNum;
      parameter.pageNum = isNaN(pageNum) ? 1 : pageNum;
      parameter.pageSize = 4;
      this.$api.message.list(parameter).then(res => {
        this.messages = res.data.rows;
        this.pagination.total = res.data.total;
        this.loading = false;
      });
    },
    toPath(path) {
      this.$router.push(path);
    },
    showDetails(type, key, status) {
      let path = "";
      switch (type) {
        case 1:
          if (status === "01") {
            path = "/student/change/check?id=" + key;
          } else {
            path = "/student/change/view?id=" + key;
          }
          break;
        case 2:
          break;
        case 3:
          // path = "student/stuStatus/stuStatusEdit?xh=" + key
          break;
        case 4:
          if (status === "01") {
            // 待审核
            path = "/student/info/uncheckedList?xh=" + key;
          } else {
            // 其他状态查看
            path = "/student/stuStatus/search/stuView?xh=" + key;
          }
          break;
        case 7:
          path = "/cultivate/arrangeCourse/tkList?id=" + key;
        default:
          break;
      }
      this.toPath(path);
    },
    showStatus(type) {}
  }
};
</script>
<style lang="less">
.home-page {
  width: 100%;
  .big-num {
    color: #101010;
    font-size: 28px;
    border-bottom: 1px solid #bbb;
    padding-bottom: 16px;
    margin-bottom: 16px;
  }
  .rate-people-text {
    line-height: 30px;
  }
  p {
    white-space: pre-wrap;
  }
  .fast-menu-list {
    margin-top: 10px;
    .ant-card-body {
      // height: calc(100% - 54px);
      text-align: center;
    }
    img {
      width: 59px;
      height: 45px;
    }
  }
  .table-right .ant-card-head,
  .table-right .ant-card-head .ant-tabs-bar {
    border-bottom: none;
  }
  .enrollment-plan_list {
    padding-bottom: 80%;
    height: 0;
    overflow: auto;
    position: relative;
    .list-wrap {
      position: absolute;
    }
    .list-item {
      padding: 0 16px 16px;
      font-size: 16px;
      color: #595959;
      display: flex;
      justify-content: space-between;
    }
  }

  .ant-card-body {
    padding: 0 12px;
  }

  .ant-list-item {
    padding: 12px 0;
  }

  .ant-list-pagination {
    margin-top: 12px;
    margin-bottom: 12px;
  }

  .ant-list-item-meta {
    display: flex;
    align-items: center;
  }
}
</style>
